<template>
	<view class="personnel-manage">
		<view class="title">人员统计</view>
		
		<view class="personnel-item">
			<view class="item-left">
				<view class="icon blue-item">
					<image src="../../../../../subpackage-overhaul/static/icon-style-5.png" mode="aspectFit"></image>
				</view>
				<view>管理人员</view>
			</view>
			<view class="item-right">
				<view>
					<view class="num">{{ personnelData.superviseTotalPersontime || 0 }}</view>
					<view class="label">累计/人次</view>
				</view>
				<view>
					<view class="num">{{ personnelData.superviseTodayPersontime || 0 }}</view>
					<view class="label">今日/人次</view>
				</view>
			</view>
		</view>
		
		<view class="personnel-item">
			<view class="item-left">
				<view class="icon green-item">
					<image src="../../../../../subpackage-overhaul/static/icon-style-5.png" mode="aspectFit"></image>
				</view>
				<view>劳务人员</view>
			</view>
			<view class="item-right">
				<view>
					<view class="num">{{ personnelData.labourTotalPersontime || 0 }}</view>
					<view class="label">累计/人次</view>
				</view>
				<view>
					<view class="num">{{ personnelData.labourTodayPersontime || 0 }}</view>
					<view class="label">今日/人次</view>
				</view>
			</view>
		</view>
		
		<view class="bar-chart">
			<scroll-view scroll-x style="width: 100%; height: 100%;">
				<qiun-data-charts type="column" :opts="barChartConfig" :chartData="barChartData" ontouch canvas2d canvasId="qiun-data-charts-column" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { reserveDecimalPoint } from '@/utils/common.js'
	import { personnelStatistics, personnelStatisticsChart } from "@/api/comprehensive/comprehensive.js"
	import QiunDataCharts from '../../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	
	export default {
		inject: ['getId'],
		components: {
			QiunDataCharts
		},
		data() {
			return {
				// 柱状图配置
				barChartConfig: {
					padding: [15, 15, 15, 15],
					enableScroll: true,
					fontColor: "transparent",
					legend: {
						show: false,
					},
					xAxis: {
						fontColor: "#b6c7d4",
						gridColor: "#ebebeb",
						disableGrid: true,
						scrollShow: true,
						itemCount: 8,
					},
					yAxis: {
						gridType: "dash",
						gridColor: "#ebebeb",
						data: [{ min: 0, fontColor: "#b6c7d4" }]
					},
					extra: {
						column: {
							type: "group",
							width: 10,
							activeBgColor: "#000000",
							activeBgOpacity: 0,
							seriesGap: 1,
						},
						tooltip: {
							showBox: false,
							splitLine: false,
						}
					}
				},
				// 柱状图数据
				barChartData: {},
				// 人员数据
				personnelData: {},
				// 人员列表
				personnelList: []
			}
		},
		methods: {
			/** 初始化 */
			async init() {
				// 获取数据
				await Promise.all([this.getPersonnelData(), this.getPersonnelList()])
				// 绘制图表
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				const monthArray = []
				const dataArray1 = []
				const dataArray2 = []
				for (let i = 0; i < 12; i++) {
					let temp = month.toString().padStart(2, '0')
					monthArray.unshift(temp + '月')
					temp = this.personnelList.find(item => item.date === `${year}-${temp}`)
					if (temp) {
						dataArray1.unshift({ value: temp.managerialPersonnel || 0, color: '#01adfb' })
						dataArray2.unshift({ value: temp.numberOfLaborPersonnel || 0, color: '#77cc4d' })
					} else {
						dataArray1.unshift(0)
						dataArray2.unshift(0)
					}
					if (month -1 > 0) {
						month--
					} else {
						month = 12
						year--
					}
				}
				this.barChartData = {
					categories: monthArray,
					series: [
						{ name: "管理人员", data: dataArray1 },
						{ name: "劳务人员", data: dataArray2 }
					]
				}
			},
			
			/** 获取人员数据 */
			getPersonnelData() {
				return new Promise(resolve => {
					if (!this.getId()) {
						resolve()
						return
					}
					personnelStatistics({ id: this.getId() }).then(res => {
						if (res && res.result) {
							this.personnelData = {
								superviseTotalPersontime: reserveDecimalPoint(res.result.superviseTotalPersontime, 10000, '9999', 0),
								superviseTodayPersontime: reserveDecimalPoint(res.result.superviseTodayPersontime, 10000, '9999', 0),
								labourTotalPersontime: reserveDecimalPoint(res.result.labourTotalPersontime, 10000, '9999', 0),
								labourTodayPersontime: reserveDecimalPoint(res.result.labourTodayPersontime, 10000, '9999', 0)
							}
						}
					}).finally(() => {
						resolve()
					})
				})
			},
	
			/** 获取人员列表数据 */
			getPersonnelList() {
				return new Promise(resolve => {
					if (!this.getId()) {
						resolve()
						return
					}
					personnelStatisticsChart({ id: this.getId() }).then(res => {
						this.personnelList = res.result
					}).finally(() => {
						resolve()
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.personnel-manage {
		background: #fff;
		.title {
			padding: 24px 16px 15px;
			line-height: 28px;
			font-size: 20px;
			font-weight: bold;
			color: #22204e;
		}
		.personnel-item {
			height: 112px;
			margin: 0 7px 9px;
			background: #f5f7fa;
			padding: 0 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-shrink: 0;
			.item-left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 32%;
				.icon {
					width: 37px;
					height: 37px;
					display: flex;
					border-radius: 50%;
					&.blue-item {
						background: linear-gradient(180deg, #01DDFB 0%, #01ADFB 100%);
					}
					&.green-item {
						background: linear-gradient(180deg, #00FFBE 0%, #77CC4D 100%);
					}
					image {
						height: 24px;
						margin: auto;
					}
				}
				.icon + view {
					font-size: 18px;
					line-height: 25px;
					color: #545e6f;
					font-weight: bold;
					margin-top: 8px;
				}
			}
			.item-right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;
				> view {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					&:nth-of-type(1) {
						width: 52%;
					}
					&:nth-of-type(2) {
						width: 48%;
					}
					.num {
						font-size: 32px;
						font-weight: 500;
						color: #425166;
						line-height: 39px;
					}
					.label {
						color: #6a819e;
						font-size: 16px;
						font-weight: bold;
						margin-top: 8px;
					}
				}
			}
		}
	}
</style>
